import React from 'react';
import type { Snack } from '../../types';

interface SnackListProps {
  snacks: Snack[];
  showQuantity?: boolean;
  quantities?: Record<string, number>;
}

export function SnackList({ snacks, showQuantity, quantities = {} }: SnackListProps) {
  return (
    <div className="space-y-3">
      {snacks.map(snack => (
        <div key={snack.id} className="flex items-center gap-3">
          <img
            src={snack.image}
            alt={snack.name}
            className="w-12 h-12 rounded-lg object-cover"
          />
          <div className="flex-1">
            <h4 className="font-medium">{snack.name}</h4>
            <p className="text-sm text-gray-600">
              {showQuantity 
                ? `数量: ${quantities[snack.id] || 0}`
                : `剩余 ${snack.stock} 个`
              }
            </p>
          </div>
          <span className="font-semibold">
            ¥{snack.price * (showQuantity ? (quantities[snack.id] || 1) : 1)}
          </span>
        </div>
      ))}
    </div>
  );
}